<script lang="ts" setup>
import ArrowDown from '@/components/icon/arrow-down.vue'
</script>

<template>
  <div class="pc-container-content-1312-grid item2_container">
    <div class="middle-content item2-content">
      <div v-for="i in 6" :key="i" class="_rounded relative item2-content_grid-item">
        <picture class="w-full h-full block">
          <source
            media="(min-width: 1536px)"
            srcset="@/views/product/reno14-pro/image/1/images-ksp-img-0-1.jpg.webp"
          />
          <source
            media="(min-width: 1024px)"
            srcset="@/views/product/reno14-pro/image/1/images-ksp-img-0-d7111.jpg.webp"
          />
          <source
            media="(min-width: 640px)"
            srcset="@/views/product/reno14-pro/image/1/images-ksp-img-0-pad-1.jpg.webp"
          />
          <img
            class="w-full h-full object-cover _rounded"
            src="@/views/product/reno14-pro/image/1/images-ksp-img-0-mo.jpg"
            alt=""
            loading="lazy"
          />
        </picture>

        <picture>
          <source media="(min-width: 1536px)" srcset="" />
          <source media="(min-width: 1024px)" srcset="" />
          <source media="(min-width: 640px)" srcset="" />
          <img src="" alt="" loading="lazy" />
        </picture>

        <div
          class="text-white absolute w-full bottom-0 left-0 p-[clamp(0.75rem,-0.0259rem+3.4483vw,1.375rem)] _rounded md:p-[1rem]"
          style="background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7))"
        >
          <p
            class="text-[clamp(1rem,-0.0862rem+4.8276vw,1.875rem)] md:text-[clamp(1rem,-0.5118rem+3.1496vw,1.5rem)]"
          >
            一站式直播神器
          </p>

          <div
            class="text-[clamp(0.625rem,0.0043rem+2.7586vw,1.125rem)] opacity-75 relative lg:hidden md:text-[clamp(0.625rem,-0.5rem+2.3438vw,1rem)]"
          >
            <p>抬手就开播，超稳超清晰</p>
            <p>5 小时蓝光流畅直播</p>
            <arrow-down class="w-[1rem] absolute bottom-0 right-0 aspect-square" />
          </div>

          <div class="pop hidden lg:grid">
            <div class="grid-item">
              <div class="opacity-75 relative lg:text-[clamp(0.625rem,-0.5rem+2.3438vw,1rem)]">
                <p>抬手就开播，超稳超清晰</p>
                <p>5 小时蓝光流畅直播</p>
                <arrow-down
                  class="absolute bottom-0 right-0 w-[clamp(1.125rem,0.6955rem+0.6711vw,1.5rem)] aspect-square"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.item2_container {
  @apply relative
  py-[clamp(3.125rem,0.7974rem+10.3448vw,5rem)]

  md:py-[clamp(2.5rem,0.443rem+5.0633vw,5rem)];
}

.item2-content {
  @apply grid grid-cols-2 gap-[clamp(0.25rem,0.0948rem+0.6897vw,0.375rem)] relative
  auto-rows-[clamp(14.375rem,0.4095rem+62.069vw,25.625rem)]

  md:grid-cols-3 md:gap-[0.375rem]
  md:auto-rows-[17.5rem]

  lg:gap-[clamp(0.375rem,0.2318rem+0.2237vw,0.5rem)]
  lg:auto-rows-[clamp(17.5rem,11.7729rem+8.9485vw,22.5rem)];

  .item2-content_grid-item {
    cursor: pointer;
    overflow: hidden;

    & > picture img {
      transition-duration: 0.3s;
    }

    &:hover > picture img {
      transform: scale(1.1);
    }

    &:hover .pop {
      grid-template-rows: 1fr;
    }

    .pop {
      z-index: 10;
      grid-template-rows: 0fr;
      transition: all 0.3s;

      .grid-item {
        min-height: 0;
        overflow: hidden;
      }
    }
  }
}
</style>
